<template>
  <view class="container">
    <!-- 传统纹样背景 -->
   <!-- <image 
      class="cultural-bg" 
      src="/static/cultural-bg.png"
      mode="aspectFill"
    ></image> -->

    <scroll-view 
      class="content" 
      scroll-y 
      refresher-enabled
      @refresherrefresh="handleRefresh"
    >
      <!-- 标题区域 -->
      <view class="header-box">
        <text class="title">我的文化传承</text>
      </view>

      <!-- 内容列表 -->
      <view class="post-container">
        <block v-if="posts.length">
          <view 
            v-for="(item,index) in posts" 
            :key="index"
            class="post-card"
          >
            <!-- 标题和时间 -->
            <view class="card-header">
              <text class="post-title">{{ item.title || '未命名话题' }}</text>
              <text class="post-time">{{ formatTime(item.createTime) }}</text>
            </view>

            <!-- 图片展示 -->
            <view class="image-grid" v-if="item.images.length > 0">
              <image 
                v-for="(img, imgIndex) in item.images" 
                :key="imgIndex"
                :src="img" 
                mode="aspectFill"
                class="topic-image"
                @click.stop="previewImage(item.images, imgIndex)"
              ></image>
            </view>

            <!-- 内容核心 -->
            <view class="card-body">
              <text class="post-content">{{ item.content || '暂无内容描述' }}</text>
            </view>

            <!-- 互动数据 -->
            <view class="action-bar">
              <view class="stat-item">
                <text class="icon">👍</text>
                <text>{{ item.likes }}</text>
              </view>
              <view class="stat-item">
                <text class="icon">👎</text>
                <text>{{ item.dislikes }}</text>
              </view>
            </view>
          </view>
        </block>

        <!-- 空状态 -->
        <view v-else class="empty-box">
          <!-- <image class="empty-icon" src="/static/empty.png"></image> -->
          <text class="empty-text">暂无发布内容</text>
        </view>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="loading-box">
       <!-- <image class="loading-icon" src="/static/loading.gif"></image> -->
        <text class="loading-text">我的发布加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
      loading: false
    }
  },
  onShow() {
    this.loadPosts()
  },
  methods: {
    async loadPosts() {
      try {
        this.loading = true
        const userInfo = uni.getStorageSync('userInfo')
        
        if (!userInfo?.mobile) {
          uni.showToast({ title: '请先登录', icon: 'none' })
          return setTimeout(() => {
            uni.navigateTo({ url: '/pages/login/login' })
          }, 1500)
        }

        // 带超时机制的请求
        const { result } = await uniCloud.callFunction({
          name: 'get-user-posts',
          data: { mobile: userInfo.mobile },
          timeout: 8000
        })

        if (result.code === 200) {
          this.posts = result.data
          if (result.data.length === 0) {
            uni.showToast({ title: '暂无发布内容', icon: 'none' })
          }
        } else {
          this.showError(result.msg || '数据加载异常')
        }
      } catch (e) {
        this.showError(e.errMsg.includes('timeout') ? '请求超时' : '网络异常')
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },

    formatTime(timestamp) {
      try {
        const date = new Date(timestamp)
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
      } catch {
        return '未知时间'
      }
    },

    previewImage(images, index) {
      uni.previewImage({
        current: index,
        urls: images,
        indicator: 'number'
      })
    },

    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/postDetail/postDetail?id=${id}`
      })
    },

    handleRefresh() {
      this.loadPosts()
    },

    showError(msg) {
      console.error('数据加载失败:', msg)
      uni.showToast({
        title: msg || '加载失败',
        icon: 'none',
        duration: 3000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  position: relative;
  background: #f5f1e8;

  .cultural-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: 0;
  }

  .content {
    position: relative;
    z-index: 1;
    padding-bottom: 40rpx;
  }
}

.header-box {
  padding: 40rpx;
  text-align: center;
  
  .title {
    font-family: '华文行楷';
    font-size: 46rpx;
    color: #8B4513;
    text-shadow: 2rpx 2rpx 4rpx rgba(139,69,19,0.2);
  }
}

.post-container {
  padding: 0 30rpx;

  .post-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(139,69,19,0.1);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .post-title {
        font-size: 34rpx;
        color: #8B4513;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .post-time {
        font-size: 24rpx;
        color: #D2B48C;
        flex-shrink: 0;
        margin-left: 20rpx;
      }
    }

    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      margin: 20rpx 0;

      .topic-image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
        border: 2rpx solid #D2B48C;
      }
    }

    .card-body {
      .post-content {
        font-size: 28rpx;
        color: #654321;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }

    .action-bar {
      display: flex;
      gap: 40rpx;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx dashed #D2B48C;

      .stat-item {
        display: flex;
        align-items: center;
        
        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 10rpx;
        }

        text {
          color: #8B4513;
          font-size: 28rpx;
        }
      }
    }
  }
}

.empty-box {
  text-align: center;
  padding: 100rpx 0;

  .empty-icon {
    width: 300rpx;
    height: 200rpx;
    opacity: 0.6;
  }

  .empty-text {
    color: #8B4513;
    font-size: 32rpx;
    margin-top: 20rpx;
  }

  .empty-tip {
    font-size: 28rpx;
    color: #D2B48C;
  }
}

.loading-box {
  padding: 60rpx 0;
  text-align: center;

  .loading-icon {
    width: 80rpx;
    height: 80rpx;
  }

  .loading-text {
    color: #8B4513;
    font-size: 28rpx;
    margin-top: 20rpx;
  }
}

.icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}
</style>